<template>
  <div>
    <div class="v-container">
      <v-header title="道路救援">
        <span class="back" @click="goBack">
          <i class="el-icon-arrow-left"></i>
        </span>
      </v-header>
      <div class="mt" style="position:relative">
        <img src="@/assets/images/7_02.jpg" width="100%">
        <span
          @click="$router.push('/roadAssistanceServiceArea')"
          style="margin-top: 10px;padding: 10px;color: orange;position:absolute;top:120px;left:8px"
        >点击查看道路救援服务范围>></span>
        <div class="login-box">
          <div id="login-title" style="background-color: #fff;margin-top: 10px;padding:10px">
            <h3 class="h3-style" style="margin:0px 0px 0px 5px;">服务流程</h3>
          </div>

          <!-- tab-container -->

          <mt-navbar v-model="selected" style="color:#333333;">
            <mt-tab-item id="1"><span style="font-size:15px">紧急拖车服务</span></mt-tab-item>
            <mt-tab-item id="2"><span style="font-size:15px">现场维修</span></mt-tab-item>
          </mt-navbar>
          <mt-tab-container
            v-model="selected"
            style="color:#999999;padding:20px;background-color:#fff;margin-top:10px"
          >
            <mt-tab-container-item id="1">
              <ul>
                <li>当您的汽车出现机械或电器故障，造成车辆无法行驶或继续行驶将无法保证您及车上乘客安全时，我们将协助安排拖车将您的座驾拖至就近的指定4S服务网点（优先就近4S网点，也可由用户指定4S网点，网点均为EXEED星途提供的网点清单列中）。我们将承担自故障位置起100公里以内的拖车费用，超出部分将需要您按照8元/KM自行承担，由经销商现场支付至服务商。</li>
                <li>
                  <h3 style="color:#333;margin-top:10px">服务条款：</h3>
                </li>
                <li>1. 此项服务仅限星途尊享权益车辆使用，自线上提交、核验权益车主身份信息后的一年内，服务期限内您可以无限次地享受此项服务。</li>
                <li>2. 服务人员抵达现场将校验车牌信息，非星途尊享权益车辆的，服务商现场随即离开，不提供服务。</li>
                <li>3. 本拖车服务目的地仅为EXEED星途指定4S网点（提供的网点清单列中），服务需求一经确认不得中途停靠，否则您将需承担该次服务的整单拖车费用。</li>
                <li>4. 在紧急拖车服务中不包括交通部门或其他部门规定限制第三方道路救援活动的路段以及在高速公路、隧道、大桥、高架道路等收费路段产生的路桥费及特殊环境下的抢险其他费用（如地库拖车、险境脱困）。</li>
                <li>5. 您可通过线上拨打4000022000（EXEED星途呼叫中心电话）进行预约。</li>
                <li>6. 事故车辆就近4S网点详情、超限服务费用可致电4000022000进行咨询。</li>
                <li>7. 收费服务的发票由服务商事后邮寄至付款人指定地址。</li>
                <li>8. 服务人员及车辆由服务商统一调配、安排指定，权益人不可指定。</li>
              </ul>
            </mt-tab-container-item>
            <mt-tab-container-item id="2">
              <ul>
                <li>当您的座驾出现因机械或电器故障无法启动，通过专业人员判定认为快速维修是可能的情况下，我们将会协助就近安排人员至抛锚现场提供现场维修服务。</li>
                <li>
                  <h3 style="color:#333;margin-top:10px">服务条款：</h3>
                </li>
                <li>1. 此项服务仅限EXEED星途尊享权益车辆使用，自线上提交、核验权益车主身份信息后的一年内，服务期限内您可以无限次地享受此项服务。</li>
                <li>2. 服务人员抵达现场将校验车牌信息，非EXEED星途尊享权益车辆的，服务商现场随即离开，不提供服务。</li>
                <li>3. 我们将承担事故车辆与其最近的抢修网点间15KM的相应维修人员的交通费用与工时费用，超出15KM按8元/KM计费。由用户现场支付至服务商。</li>
                <li>4. 现场维修服务包括换胎、充电、加水和其他小于30分钟的机械修理。</li>
                <li>5. 现场维修中任何配件或其它材料的供应或更换均不涵盖其中。</li>
                <li>6. 现场维修服务中不包括交通部门或其他部门规定限制第三方道路救援活动的路段。</li>
                <li>7. 您可通过线上拨打4000022000（EXEED星途呼叫中心电话）进行预约。</li>
                <li>8. 事故车辆就近4S网点详情、超限服务费用可致电4000022000进行咨询。</li>
                <li>9. 收费服务的发票由服务商事后邮寄至权益人指定地址。</li>
                <li>10. 紧急维修人员由服务商统一调配、安排指定，权益人不可指定。</li>
              </ul>
            </mt-tab-container-item>
          </mt-tab-container>

          <div class="login-title" style="margin-top:10px">
            <div class="c_select" @click="changeSelect()">
              <img v-show="!select" src="@/assets/images/4_05.png" width="25">
              <img v-show="select" src="@/assets/images/3_05.png" width="25">
            </div>
            <span style="text-decoration:none">我已了解该服务条款</span>
          </div>
        </div>

        <div class="button-box" v-on:click="submit">
          <p>立即联系救援</p>
        </div>
      </div>
    </div>

    <mt-popup v-model="popupVisible" style="width:100%" position="bottom">
      <div id="login-title" style="background-color: #fff;margin-top: 10px;padding:10px">
        <h3 class="h3-style2" style="margin:0px 0px 0px 5px;">机场贵宾服务</h3>
      </div>
    </mt-popup>
  </div>
</template>

<script>
import vHeader from "@/components/Header.vue";
import countDown from "@/components/CountDown.vue";
import { Toast } from "mint-ui";
import { Resource } from "@/services/resource";
import LocalStorage from "@/services/storage";

export default {
  name: "login",
  components: {
    vHeader,
    countDown
  },
  props: {
    title: {
      type: String,
      default: "标题"
    }
  },
  data() {
    return {
      msg: "Footera",
      showvCode: false,
      telphone: "",
      dCode: "",
      vCode: null,
      vCodeImg: "",
      username: "",
      email: "",
      password: "",
      select: true,
      popupVisible: false,
      selected: "1"
    };
  },
  methods: {
    // 返回上一页
    goBack() {
      this.$router.push("/mainpage");
    },
    submit() {
      if (this.select) {
        window.location.href = "tel:4000022000";
      } else {
        Toast({
          message: "请仔细阅读该服务条款",
          position: 'middle'
        });
      }
    },
    changeSelect() {
      this.select = !this.select;
    }
  }
};
</script>

<style lang="less" scoped>
@import url("./style.less");
.mint-tab-item-label {
  font-size: 15px !important;
}
</style>
<style scoped>
li >>> .mint-field-other {
  position: static;
}
</style>